import React, { useState, useEffect } from "react";
import { Row, Col, Icon } from "antd";
import Author from "../components/Author";
import Tags from "../components/Tags";
import Comment from "../components/Comment";
import marked from "marked";
import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";

import http from "../config/http";
import "markdown-navbar/dist/navbar.css";

const Detail = (props) => {
  const [prev, setPrev] = useState(null);
  const [next, setNext] = useState(null);
  const [detailData, setDetailData] = useState(props);
  const [html, setHtml] = useState("");
  const [type, setType] = useState("aid");

  useEffect(() => {
    const id = props.match.params.id;
    setType("aid" + id);
    getDetail(id);
  }, []);
  // 获取详情信息
  const getDetail = function (id) {
    http.get("/tourist/article/"+id).then((res) => {
     if (res.code === 1) {
      const item = res.data;

      // 字段映射与处理
      const formattedData = {
        _id: item.id,
        title: item.title,
        addDate: item.createdAt ? new Date(item.createdAt).toLocaleDateString() : "未知",
        read: item.viewCount || 0,
        star: item.commentCount || 0,
        contentHtml: item.contentHtml, // HTML 内容（用于展示）
      };
      setHtml(formattedData.contentHtml);
      setType(item.categoryId);
      setDetailData(formattedData);
      
    }
    });
  };
  // 高亮

  const renderer = new marked.Renderer();


  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {
      return hljs.highlightAuto(code).value;
    },
  });

  const handlePrev = function () {
    getDetail(prev._id);
  };
  const handleNext = function () {
    getDetail(next._id);
  };
  

  return (
    <div className="articleDetail">
      <div
        style={{ display: prev ? "block" : "none" }}
        onClick={handlePrev}
        className="pagenav prev"
        title="prev"
      >
        <Icon type="double-left" />
      </div>
      <div
        style={{ display: next ? "block" : "none" }}
        onClick={handleNext}
        className="pagenav next"
        title="next"
      >
        <Icon type="double-right" />
      </div>
      <Row className="comm-main" type="flex" justify="center">
        <Col
          className="comm-left animated fadeInUp"
          xs={24}
          sm={24}
          md={16}
          lg={18}
          xl={14}
        >
          <div className="articleDetail-body">
            <h1 className="detailed-title">
              <Icon
                onClick={() => {
                  props.history.go(-1);
                }}
                title="返回列表"
                className="back"
                type="left"
              />
              {detailData.title}
            </h1>

            <div className="list-icon">
              <span>
                <Icon type="calendar" /> {detailData.addDate}
              </span>
              {/* <span className="read">
                <Icon type="like-o" /> {detailData.star}
              </span>
              <span>
                <Icon type="eye" /> {detailData.read}
              </span> */}
            </div>

            <div
              className="detailed-content "
              dangerouslySetInnerHTML={{ __html: html }}
            ></div>
            <div className="detailed-tool">
              <div className="detailed-tool-item">
                <Icon type="smile" />
                {/* <span>{detailData.star}次点赞</span> */}
              </div>
            </div>
          </div>
          <Comment articleId={props.match.params.id} />
        </Col>

        <Col className="comm-right " xs={0} sm={0} md={7} lg={6} xl={5}>
          <Author />

          <Tags />
       
        </Col>
      </Row>
    </div>
  );
};

export default Detail;
